<template>
    <header>
      <div :style='{"position":"absolute",height:height,"background-color":"rgba(0, 0, 0, 0.5)","z-index":"1000",width:"100%"}'><div :style="{'position':'absolute',visibility:(hidden?'hidden':'visible'),top:'400px',width:'800px',height:'426px',left:'calc(50% - 400px)','background-color':'white',color:'black'}">
          <ul class='clear'><li @click='bian' style='float:left;font-size:19px;width:400px;text-align:center' v-for='str,i of ccy' :key='i'>{{str}}</li></ul><div @click='xx' style="width: auto;position: absolute;top: -13px;right: -12px;height: auto;background-color: transparent;"><img src="/img/close.png" alt=""></div>
          </div></div>
        <div style="background-color: transparent;position: fixed;right: 20px;bottom: 100px;width: 55px;height: 205px;z-index: 999;">
        <ul style="cursor: pointer;" id="san" class="san" @mouseover="xian" @mouseout="yin" @click="dian">
            <li data-a='1'>
                <img data-a='1' src="/img/suggestion_1.png" alt="" style="width: 29px;vertical-align: middle;" >
                <div  :class="{xianshi:x}" style="top:25px">
                    <div>意见反馈</div>
                    <div></div>
                </div>

            </li>
            <li data-a='2'><img data-a='2' src="/img/im_normal_new_1122_1.png" alt="" style="width: 29px;vertical-align: middle;">
                <div :class="{xianshi:y}"  style="position:absolute;top: 85px;right: 80px;width: 75px;height: 30px;">
                    <div >在线客服</div>
                    <div></div>
                </div>
            </li>
            <li data-a='3'><img data-a='3' src="/img/toTop_1122_1.png" alt="" style="width: 29px;vertical-align: middle;">
                <div :class="{xianshi:z}"  style="position:absolute;top:150px;right: 80px;width: 75px;height: 30px;">
                    <div>回到顶部</div>
                    <div></div>
                </div>
            </li>
        </ul>
    </div>
        <!-- 大的div宽为100%，高为40px -->
        <div>
            <!-- 包裹的div宽为1190px，高为父级的100% -->
            <div>
                <!-- 左边的div -->
                <div class="h_left">
                    <ul>
                        <li @click="aa" style=" cursor: pointer;"><span ><img src="/img/location.png" alt=""></span><span>{{city}}</span></li>
                        <li><router-link to="/" id="index">首页</router-link></li>
                        <li ><router-link to="/search">立即找房</router-link></li>
                        <li> <router-link to="/publish">发布房源</router-link> </li>
                        <li><router-link to="/shiyou">找室友</router-link></li>
                        <li><router-link to="/download">下载APP</router-link></li>
                        <li><a href="#">伙伴登录</a></li>
                    </ul>

                </div>
                <!-- 右边的div -->
                <div class="h_right" @mouseover="ent" @mouseleave="lev">
                    <ul>
                         <span id='info'><img src="/img/icon_people_white.png" alt=""></span>
                        <router-link :to="!login?{name:'register',query:{history:1}}:{}">{{login?userName:'注册'}}</router-link>
                        <router-link :style="{display:(login?'none':'inline-block')}" :to="{name:'login',query:{history:1}}" >登录</router-link>
                        <div :style="{'height':'90px','position':'absolute','background-color':'white',border:'1px solid #dbdbdb ',color:'black',width:'130px','display':(login&&hover?'block':'none'),'z-index':'2000'}">
    <p @click='find' class="aaax" style="height: 45px;
    line-height: 45px;text-align:center;border-bottom:1px solid #dbdbdb">看房清单</p>
    <p @click="exit" class="aaax" style="height: 45px;
    line-height: 45px;text-align:center">退出</p>
    </div>
                    </ul>
                </div>
            </div>
        </div>
    </header>
</template>
<script>
import {mapActions,mapState,mapMutations} from 'vuex'
export default {
    data(){
        return{
            x:false,
            y:false,
            z:false,
            height:'0',
            hidden:true,
            city1:'',
            ccy:['杭州','西安','上海','北京','成都','郑州','广州','深圳','天津','武汉',],
            scrolltop:'',
            hover:false,
        }
    },
    computed:{
       ...mapState(['city','login','userName','cid'])
    },
    mounted() {
    //    var map = new AMap.Map('container', {
    //     resizeEnable: true
    // });
    // this.city1=map.getAdcode()
   if(!this.city){
        
     AMap.plugin('AMap.Geolocation', ()=> {
        var geolocation = new AMap.Geolocation({
        });
        geolocation.getCurrentPosition((status,result)=>{
            var a =result.addressComponent.city
           var a=  a.substr(0,a.length-1);
           this.city1 = a;
             this.plogin( this.city1);
        });
    });};
    window.addEventListener('scroll',this.handleScroll,true)
    },

  
    methods:{ 
       ...mapMutations(['setUserName']),
         handleScroll(){
      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      this.scrolltop=scrollTop;
    },
        ...mapActions(['plogin']),
     bian(e){
         if(this.$route.query.lid){
             this.$router.push({ path: '/search' });
         }
         this.xx()
         this.city1=e.target.innerText;
         this.plogin(this.city1)
        
     },
     find(){
         this.$router.push('/menu')
     },
     exit(){
         this.setUserName('')
     },
     ent(){
         if(this.login){this.hover=true;}
     },
     lev(){
         this.hover=false;
     },
      xx(){
          this.height='0' ;
         this.hidden=true;
      },
        aa(){
           this.height=document.body.scrollHeight+'px' ;
           this.hidden=false;
 
        },
        dian(e){
            if(e.target.dataset.a==3){
                          
window.scrollTo({ 
    top: 0, 
    behavior: "smooth" })
            }
        },
        xian(e){
            if(e.target.dataset.a==1){
                this.x=true;
            }else if(e.target.dataset.a==2){
                this.y=true;
            }else if(e.target.dataset.a==3){
                this.z=true;
            }
        },
        yin(){
            this.x=false;
            this.y=false;
            this.z=false;
        },

    }
}
</script>
<style scoped>
.aaax:hover{
    cursor: pointer;
    background-color: #f5f5f5;
}
.san .xianshi{
   
    visibility: visible;
    position: absolute;
    right: 80px;
    width: 75px;
    height: 30px;
}
.san>li>div>div:nth-child(1) {
    position: absolute;
    top: 0;
    right: 0;
    width: 75px;
    height: 30px;
    background-color: #38393a;
    color: white;
    font-size: 14px;
    line-height: 30px;
    
}

.san>li>div>div:nth-child(2) {
    height: 0;
    width: 0;
    position: absolute;
    top: 7px;
    right: -16px;
    border: 8px solid #38393a;
    border-color: transparent transparent transparent #38393a;
    background-color: transparent;
}

.san li {
    font-size: 18px;
    height: 55px;
    margin: 10px 0;
    text-align: center;
    line-height: 55px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 0px 9px 2px #cccccc;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.san>li>div {
    visibility: hidden;
}
body header div {
    height: 40px;
    background-color: #ee3843;
}
body header div div {
    font-size: 14px;
    height: 100%;
    margin: 0 auto;
    width: 1190px;
    color: #ffffff;
}body header div div ul {
    margin: 0;
    padding: 0;
    list-style: none;
}body header div div .h_left {
    width: 800px;
    float: left;
}body header div div .h_left ul li {
    cursor: pointer;
    position: relative;
    line-height: 40px;
    float: left;
    margin: 0 25px;
}body header div div .h_left ul li span:nth-child(1) {
    display: inline-block;
    width: 20px;
}

body header div div .h_left ul li a {
    color: #ffffff;
    text-decoration: none;
}

body header div div .h_left ul li:hover a {
    color: #fcd7d9;
}body header div div .h_left ul li:after {
    content: '';
    width: 0;
    height: 3px;
    background: #ffffff;
    position: absolute;
    top: 93%;
    left: 50%;
    transition: .3s;
}body header div div .h_right {
    width: 120px;
    float: right;
}

.h_right ul {
    margin-left: -40px;
}

body header div div .h_right a {
    color: #ffffff;
    text-decoration: none;
    line-height: 40px;
    padding: 0 10px;
}

body header div div .h_right a:hover {
    cursor: pointer;
    color: #fcd7d9;
}
/*# sourceMappingURL=moban.css.map */
</style>